
<template>
	<view class="pay-result column-center">
		<view class="contain bg-white">
			<view class="header  column-center">
				<view>
					<image class="tips-icon" src="/static/images/icon_paySuccess.png"></image>
				</view>
				<view class="xl mt20">订单支付成功</view>
			</view>
			<view style="height:181rpx"></view>
			<view class="info">
				<view class="order-num row-between mt20">
					<view class="ml20">订单编号</view>
					<view class="mr20">
						{{payInfo.sn}}
					</view> 
				</view>
				<view class="order-pay-type row-between mt20">
					<view class="ml20">支付方式</view>
					<view class="mr20">{{payInfo.pay_way_text}}</view>
				</view>
				<view class="order-pay-money row-between mt20">
					<view class="ml20">支付金额</view>
					<view class="mr20">
						<price-format :price="payInfo.order_amount"></price-format>
					</view>
				</view>
			</view>
			<view class="line ml20"></view>
			<view class="opt-btn-contain row-center wrap">
				<navigator open-type="redirect" hover-class="none" class="check-order-btn row-center bg-primary br60 mt20" url="/pages/user_order/user_order">
					<view class="white bg-primary lg">查看订单</view>
				</navigator>
				<navigator open-type="redirect" hover-class="none" class="go-back-btn row-center br60 mt20" url="/">
					<view class="primary br60 lg">返回首页</view>
				</navigator>
			</view>
		</view>
		<u-mask :show="maskDisplaystatus">
			<view class="" style="width: 65%;height: 300px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);">
				<u-icon name="close" @click="maskDisplaystatus = false" style="position: absolute;right: 7%;top: 5%;z-index: 1;" size="30"></u-icon>
				<image src="https://image.leyuanyinyong.cn/uploads/images/2021112120124949dd95403.png" mode="widthFix" style="width: 100%;"></image>
				<image src="https://image.leyuanyinyong.cn/uploads/images/20211121201233fc67e9312.png" mode="widthFix" style="width: 60%;position: absolute;height: 28px;left: 50%;transform: translateX(-45%);bottom: 0;" @click="goPage('/pages/user_coupon/user_coupon')"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		getOrderUnifiedPayDetail
	} from '@/api/order';
	export default {
		data() {
			return {
				payInfo: {},
				maskDisplaystatus:false
			};
		},

		components: {

		},
		props: {},
		onLoad: function(options) {
			this.sn = options.sn;
			this.getOrderResultFun();
		},


		methods: {
			getOrderResultFun() {
				getOrderUnifiedPayDetail(this.sn).then(res => {
					if (res.code == 1) {
						this.payInfo = res.data
						this.maskDisplaystatus = res.data.give_coupon_status
					}
				});
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	};
</script>
<style lang="scss">
	.pay-result {
		.contain {
			width: 682rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			margin-top: 78rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 40rpx;
			position: relative;

			.tips-icon {
				width: 112rpx;
				height: 112rpx;
			}

			.header {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -50rpx;
			}

			.order-num {
				align-items: flex-start;
			}

			.info {
				margin-bottom: 40rpx;
			}

			.opt-btn-contain {
				margin-top: 40rpx;

				.check-order-btn {
					width: 650rpx;
					height: 84rpx;
				}

				.go-back-btn {
					width: 650rpx;
					height: 84rpx;
					border:1px solid  $-color-primary;
					box-sizing: border-box;
				}
			}

			.line {
				width: 650rpx;
				border-top: 1px solid rgba(229, 229, 229, 1);
			}
		}
	}
</style>
